<template>
	<view class="flex flex-col justify-center h-screen">
		<view class="text-center">
			<view class="mb-4"><com-clock-vue></com-clock-vue></view>
			<view>
			{{ dateInfo.dateText }}
				<text :class="dateInfo.isDrawDay ? 'text-red-400' : ''">星期{{dateInfo.W}}</text>
			</view>
			<view>
				{{ dateInfo.timeText }}
				<text :class="dateInfo.isDrawDay ? 'text-red-400' : ''">{{dateInfo.isDrawDay ? '（开奖日）' : ''}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import ComClockVue from './components/ComClock.vue';
	import SsqDataModel from '@/model/SsqDataModel';
	import {
		ref
	} from 'vue';

	const ssqDataModel = new SsqDataModel();

	ssqDataModel.loadData();
	const inteId = ref(0);
	let date = null;
	const dateInfo = ref({
		y: '0000',
		m: '00',
		d: '00',
		H: '00',
		i: '00',
		s: '00',
		w: 0,
		W: '-',
		dateText: '0000-00-00',
		timeText: '00:00:00',
		isDrawDay: false,
	});
	const drawDays = [1, 3, 6]
	let www = ['日', '一', '二', '三', '四', '五', '六'];
	setInterval(() => {
		date = new Date();
		dateInfo.value.Y = date.getFullYear();
		dateInfo.value.m = ('0' + date.getMonth() + 1).slice(-2);
		dateInfo.value.d = ('0' + date.getDate()).slice(-2);
		dateInfo.value.H = ('0' + date.getHours()).slice(-2);
		dateInfo.value.i = ('0' + date.getMinutes()).slice(-2);
		dateInfo.value.s = ('0' + date.getSeconds()).slice(-2);
		dateInfo.value.w = date.getDay();
		dateInfo.value.W = www[date.getDay()];
		dateInfo.value.dateText = `${dateInfo.value.Y}-${dateInfo.value.m}-${dateInfo.value.d}`;
		dateInfo.value.timeText = `${dateInfo.value.H}:${dateInfo.value.i}:${dateInfo.value.s}`;
		dateInfo.value.isDrawDay = drawDays.includes(date.getDay());
	}, 1000);
</script>